<!--
 * @Description: 修改密码组件
 * @Author: laufing
 * @Date: 2020-02-19 20:55:17
 * @LastEditors: laufing
 * @LastEditTime: 2020-03-01 15:34:08
 -->
<template\

>
  <div id="updatePw">
    <el-dialog title="修改密码" width="300px" center :visible.sync="isUpdatePw">
      <el-form
          :model="LoginUser"
          :rules="rules"
          status-icon
          ref="ruleForm"
          class="demo-ruleForm"
      >

        <el-form-item prop="originPw">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="原始密码"
              v-model="LoginUser.originPw"
          ></el-input>
        </el-form-item>
        <el-form-item prop="newPw">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="新密码"
              v-model="LoginUser.newPw"
          ></el-input>
        </el-form-item>
        <el-form-item prop="confirmNewPw">
          <el-input
              prefix-icon="el-icon-view"
              type="password"
              placeholder="确认密码"
              v-model="LoginUser.confirmNewPw"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="medium" type="primary" @click="updatePassword" style="width: 100%">
            修改密码
          </el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>

import {mapActions} from "vuex";
import axios from "axios";

axios.defaults.withCredentials = true;

export default {
  // 登录组件
  name: "UpdatePw",
  data() {

    // 密码的校验方法
    let validatePass = (rule, value, callback) => {
      console.log("校验密码，规则", rule, "密码", value, "回调函数", callback)
      // TODO 校验密码
      // 失败 return callback(new Error("字母开头,长度5-16之间,允许字母数字下划线"));
      // 成功 return callback();
      return callback();
    };
    return {
      LoginUser: {
        originPw: "",
        newPw: "",
        confirmNewPw: "",
      },
      // 用户信息校验规则,validator(校验方法),trigger(触发方式),blur为在组件 Input 失去焦点时触发
      rules: {
        originPw: [{validator: validatePass, trigger: "blur"}],
        newPw: [{validator: validatePass, trigger: "blur"}],
        confirmNewPw: [{validator: validatePass, trigger: "blur"}],
      },
    };
  },
  computed: {
    // 控制更新密码组件是否显示
    isUpdatePw: {
      get() {
        return this.$store.getters.getUpdatePw;
      },
      set(val) {
        this.$refs["ruleForm"].resetFields();
        this.setUpdatePw(val);
      },
    },
  },
  methods: {
    //将store中的actions方法映射到methods
    ...mapActions(["setUser", "setUpdatePw"]),

    // 点击修改密码触发
    updatePassword() {
      // 通过element自定义表单校验规则，校验用户输入的用户信息
      this.$refs["ruleForm"].validate((valid) => {
        //如果通过校验开始请求后端
        if (valid) {
          // TODO 修改密码
          this.$axios.put('/user/password/',{
            originPw:this.LoginUser.originPw,
            freshPw:this.LoginUser.newPw,
            cofirmPw:this.LoginUser.confirmNewPw
          },{
            headers:{
              Authorization: localStorage.token || ''
            }
          })
          .then(res => {
            console.log('修改成功的响应',res)
            if(res.data.code == 200){
              this.serUpdatePw = false
              this.notifySucceed(res.data.msg)
            }else{
              this.notifyError(res.data.msg)
            }
          })
          .catch(err => {
            console.log('修改密码错误:',err)
            return Promise.reject(err)
          })
        }
      });
    },
  },
};
</script>


<style>
</style>
